<template>
  <div class="home">
    <!-- 头部 layout布局 -->
    <van-row>
      <van-col span="7" class="ceshi">
        <img src="../../assets/images/img/ceshi.png">
        <span>测一测</span>
      </van-col>
      <!-- 搜索框 -->
      <van-col span="12">
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          shape="round"
          input-align="center"
        />
      </van-col>
      <van-col span="5" class="qiandao">
        <img src="../../assets/images/img/qiandao.png" class="qd">
        <img src="../../assets/images/img/lingdang.png" class="ld">
      </van-col>
    </van-row>
    
    <!-- 滚动按钮 -->
    <transition name="fade" appear>
      <van-tabs v-model="active" v-if="isshow">
        <van-tab v-for="(value,index) in tabTit" :title="value" :key="index">
        </van-tab>
      </van-tabs>
    </transition>

    <!-- 滚动的外框 -->
    <div class="btWrap">
      <div class="btInner">
        
        <!-- 天气 -->
        <div class="weather-wrap">
          <div class="weather">
            <img src="../../assets/images/img/duoyun.png" class="dy">
              <div class="weather-info">
                <p class="tell">今天的保湿和防晒指数, 点我一下就告诉你</p>
                <p class="need">需要允许位置权限哦</p>
            </div>
          <img src="../../assets/images/img/jiantou.png" class="jt">
          </div>
        </div>

        <!-- 广告语 -->
        <div class="banner">
          <div>
            <img src="../../assets/images/img/tuceng6.png" class="tc6">
          </div>
          <div>
            <img src="../../assets/images/img/katong.png" class="kt">
          </div>
        </div>

        <!-- 金刚区 Grid宫格-->
        <van-grid :column-num="5" class="jin-gang" :border="false">
          <van-grid-item v-for="(item,index) in list" :key="index" :icon="item.pic" :text="item.title" @click="jumpNext(item)" />
        </van-grid>

        <!-- 推荐文章 -->    
        <div class="artical" v-for="item in partOne" :key="item._id">
          <!-- 图片 -->
           <img :src=perfix+item.bigurl class="tc2">
          <!-- 标题 -->
          <h3 class="van-multi-ellipsis--l2 artical-title">{{item.title}}</h3>
          <!-- 描述 -->
          <p class="atc-descript">{{item.content}}</p>
          <!-- 作者 -->
          <div class="artical-info">
            <div class="author">
              <img :src=perfix+item.authorUrl class="aut-pic">
              <span class="aut-name">{{item.author}}</span>
            </div>
            <div class="artical-bk">
              <p><van-icon name="good-job-o" @click="changeColor(item)" :class="{addcolor:item.flag}" /> <span>{{item.dianzan}}</span></p>
              <p><van-icon name="comment-o" /> <span>{{item.pinglun}}</span></p>
            </div>
          </div>
        </div>

        <!-- 左右滑动 -->
        <SlideX />

        <!-- 推荐文章 -->    
        <div class="artical" v-for="val in partTwo" :key="val._id">
          <!-- 图片 -->
           <img :src=perfix+val.bigurl class="tc2">
          <!-- 标题 -->
          <h3 class="van-multi-ellipsis--l2 artical-title">{{val.title}}</h3>
          <!-- 描述 -->
          <p class="atc-descript">{{val.content}}</p>
          <!-- 作者 -->
          <div class="artical-info">
            <div class="author">
              <img :src=perfix+val.authorUrl class="aut-pic">
              <span class="aut-name">{{val.author}}</span>
            </div>
            <div class="artical-bk">
              <p><van-icon name="good-job-o" @click="changeColor(val)" :class="{addcolor:val.flag}"/> <span>{{val.dianzan}}</span></p>
              <p><van-icon name="comment-o" /> <span>{{val.pinglun}}</span></p>
            </div>
          </div>
        </div>

      <!-- 上拉加载内层结束 -->
      </div>
    <!-- 上拉加载外层结束 -->
    </div>

    <!-- 回到顶部 -->
    <div class="backTop" @click="toTop" v-if="backShow"><van-icon name="back-top" /></div>
  <!-- home结束 -->
  </div>
</template>

<script>
import { ref,reactive } from "vue";
import BetterScroll from 'better-scroll';
import SlideX from "../shouye/SlideX.vue";
import { useRouter } from "vue-router";
import { getArticalApi } from "../../utils/home-api.js";

// import MyFooter from "../shouye/MyFooter.vue"
let bs= null;
export default {
  setup() {
    let twoArt= reactive([]);
    let restArt = reactive([]);
    let allArtical = reactive([]);
    let value = ref("");
    const router = useRouter();
    // 金刚区
    let {list} = jinGang();
    let {jumpNext} = jinGang();
    function jinGang() {
      const list = reactive([
        {
          pic:require('../../assets/images/img/chachanpin.png'),
          title: "查产品",
          path: "/search",
        },
        {
          pic:require('../../assets/images/img/hufubang.png'),
          title: "护肤榜",
          path: "/hufubang",
        },
        {
          pic:require('../../assets/images/img/meizhuangbang.png'),
          title: "美妆榜",
          path: "/meizhuangbang",
        },
        {
          pic:require('../../assets/images/img/pinpaiku.png'),
          title: "品牌库",
          path: "/pinpaiku",
        },
        {
          pic:require('../../assets/images/img/qingbaoju.png'),
          title: "福利情报局",
          path: "/classify",
        }
      ]);

      const jumpNext = (item) => {
        router.push(item.path)
      }
      return {
        list,
        jumpNext
      };
    }

    // 滚动的tab
    let isshow = ref(false);
    let active = ref(0);
    const tabTit = reactive([
      "全部","祛痘.痘印","美白.淡斑","黑头","舒缓","抗敏","抗衰","防晒","护肤入门"
    ]);

    return {
      value,
      list,
      jumpNext,
      isshow,
      active,
      tabTit,
      twoArt,
      restArt,
      allArtical,
    }
  },
  data() {
    return {
      partOne: [],
      partTwo: [],
      startIndex: 2, //上拉加载的初始索引
      count: 3, //每次加载3条
      backShow: false,
      perfix: "", //图片地址前缀
    }
  },
  mounted() {
    getArticalApi().then(async (res) => {
      this.partOne = res.result.slice(0,2);
      this.perfix = res.perfix;
      await this.$nextTick();
      bs = new BetterScroll('.btWrap', {
        scrollX: false,
        scrollY: true,
        click: true,
        probeType: true, //实时监听滚动
        mouseWheel: true,//开启鼠标滚轮
        disableTouch: false,//启用手指触摸
        pullUpLoad: true,
      });
      bs.on("scroll",(position) => { //滚动按钮
        // console.log(position); //{x: 0, y: -314.775}
        this.isshow = position.y <= -250? true: false;
        this.backShow = true;
        if(position.y <= -250) {
          this.isshow = true;
          this.backShow = true;
        } else {
          this.isshow = false;
          this.backShow = false;
        }
      });
      bs.on("pullingUp",() => {
        // console.log(1111);
        this.getArtical();
      });
    });

  },
  components: {
    SlideX,
  },
  methods: {
    async getArtical() {
      const res = await getArticalApi();
      this.partTwo = this.partTwo.concat(res.result.slice(this.startIndex,this.startIndex + this.count));
      this.startIndex += this.count;
      await this.$nextTick(); //等待dom重新渲染后
      bs.refresh(); //重新计算高度
      // 上一次拉到底了 才能进行下一次
      // console.log("拉到底了",this.partTwo);
      // console.log(res.result.length)
      if(this.partTwo.length < res.result.length -2){
      bs.finishPullUp();        
      }
    },
    toTop() {
      bs.scrollTo(0,0); //回到顶部
    },
    changeColor(item) {
      item.flag = true; //点赞过的添加标记
      item.dianzan++;
    }
  },
  computed: {
    articalTwo() {
      return  this.partTwo.length !==0?this.partTwo:[];
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";

.home {
  width: 100%;
  .fade-enter-active {
    animation: change 1.5s;
  }
  @keyframes change {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0;
      transform: translateY(-10px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  // 滚动的tab导航
  .van-tabs {
    position: fixed;
    top: 58px;
    left: 0;
    z-index: 99;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    /deep/ .van-tabs__line {
      background-color: #64c8c8;
    }
  }
  // 回到顶部
  .backTop {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 40px;
    height:40px;
    font-size: 40px;
    color: #fff;
    .van-badge__wrapper {
      background: #ddd;
      opacity: 0.8;
    }
  }
}

// 头部
.van-row {
  .ceshi {
    width: 100%; //弹性盒中子元素不写高度 就会继承父元素的高度
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    z-index: 100;
    // border-bottom: 1px solid #ddd;
    img {
      width: 24px;
      height: 24px;    
    }
    span {
      font-size: @M-font;
      font-weight: 600;
      line-height: 24px;
    }
  }

  .van-search {
    padding: 15px 0;
    .van-search__content {
      width: 160px;
      height: 28px;
    }
  }
  .qiandao {
    display: flex;
    justify-content: space-around;
    align-items: center;
    // background: red;
    .qd {
      width: 34px;
      height: 34px;
    }
    .ld {
      width: 20px;
      height: 24px;
    }
  }
}

// 天气
.weather-wrap {
  border-top: 1px solid #eee;
  padding-top: 10px;
}
.weather {
  width: 100%;
  height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // background: blue;
  padding: 0 10px;
  background: url("../../assets/images/img/juxing5.png");
  // margin: 10px 0;
  .dy {
    width: 46px;
    height: 40px;
  }
  .weather-info {
    p:first-child {
      color: #64c8c8;
      font-size: @SS-font;
      margin-top: 5px;
    }
    p:last-child {
      color: #b5b5b5;
      font-size: @SS-font;
      margin-top: 5px;
    }
  }
  .jt {
    width: 26px;
    height: 20px;
  }
}

// 广告语
.banner {
  width: 100%;
  padding: 15px 0 10px 15px;
  // background: pink;
  display: flex;
  justify-content: space-between;
  .tc6 {
    width: 224px;
    height: 128px;
  }
  .kt {
    width: 122px;
    height: 134px;
  }
}

// 金刚区 
// 利用深度选择器 修改vant组件默认样式
/deep/ .jin-gang {
  .van-grid-item__content {
    padding: 0;
    .van-icon__image {
      width: 70px;
      height:58px;
    }
  }
  .van-grid-item__text {
    color: #717171;
  }
  .van-grid-item__content:nth-last-child(5) {
   .van-icon__image {
      width: 70px;
      height:58px;
    }
  }
}

//文章推荐
.artical {
  padding: 15px;
  overflow:auto;
  border-bottom: 1px solid #ddd;
  // background: pink;
  .tc2 {
    margin-top: 10px;
    width: 344px;
    height: 150px;
  }
  .artical-title {
    font-size: 18px;
    font-weight: 400px;
    padding: 10px 15px 5px;
  }
  .atc-descript{
    padding-left: 15px;
    font-size: @SS-font;
    color: #515151;
    height: 30px;
    line-height: 30px;
  }
  .artical-info {
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // 作者信息
    .author {
      width: 150px;
      // background: red;
      display: flex;
      align-items: center;
      .aut-pic {
        width: 28px;
        height: 28px;
        margin-right: 10px;
      }
      .aut-name {
        flex: 1;
        font-size: @SS-font;
        color: #515151;
        .hide ();
      }
    }
    // 点赞
    .artical-bk {
      width: 150px;
      // background: blue;
      color: #999;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      // background: red;
      p {
        height: 28px;
        // background: blue;
        margin-right: 20px;
        .van-icon {
          font-size:20px;
        }
        .addcolor {
          color: #64c8c8;
        }
        span {
          height:28px;
          line-height: 28px;
          vertical-align: middle;
          font-size: @SS-font;
        }
      }
    }
  }
}
// 滚动betterScroll
.btWrap {
  width: 100%;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 62px;
  // background: blueviolet;
  overflow: hidden;
}
// .add-color {
//   color: red;
// }
</style>
